<template>
	<view>
		<view class="shop">
			<view class="shop-head">
				<view class="shop-title">
					推荐门店
				</view>
				<view class="shop-name" @click="showChoosePage">
					{{nearby.name}}
				</view>
				<uni-icon type="arrowright" color="#b6b6b6" size=26></uni-icon>
			</view>
			<view class="shop-location">
				<image src="../../../static/location-green.png" mode="" style="width: 40upx;height: 44upx;margin-right: 20upx;"></image>
				<view class="location-text" @click="viewLocation">
					{{nearby.address}}
				</view>
				<image src="../../../static/phonecall.png" mode="" style="width: 46upx;height:46upx;margin-left: 20upx;" @click="phoneCall"></image>
			</view>
		</view>
		<view class="order">
			<view class="order-title">
				预约到店时间
			</view>
			<view class="order-time" @click="showMultiSelector">
				{{order_time?order_time:'选择您的到店取货时间'}}
			</view>
			<uni-icon type="arrowright" color="#b6b6b6" size=24></uni-icon>
			<mpvue-picker ref="mpvuePicker" mode="multiSelector" deepLength="3" :pickerValueDefault="pickerValueDefault"
			@onConfirm="onConfirm" :pickerValueArray="pickerValueArray"></mpvue-picker>
		</view>
		<view class="list">
			<view class="list-head">
				<view class="list-title">
					购物清单
				</view>
			</view>
			<view class="list-item" v-for="(item,key) in carts" :key="key">
				<image class="item-image" :src="item.thumb" mode="aspectFill"></image>
				<view class="item-info">
					<view class="item-title">
						<text>{{item.name}}</text>
						<text class="weight">
							{{item.weight}}g
						</text>
						<view style="flex: 1;"></view>
						x{{item.count}}
					</view>
					
					<view class="item-bottom">
						<text class="item-price">
							￥{{item.price}}
						</text>
					</view>
				</view>
			</view>
			<view class="total">
				<view class="total-item">
					<view class="total-title">
						商品总额
					</view>
					<view class="total-value">
						+￥{{totalPrice}}
					</view>
				</view>
				<view class="total-item">
					<view class="total-title">
						基本优惠
					</view>
					<view class="total-value">
						-￥{{baseDiscount}}
					</view>
				</view>
				<view class="total-item">
					<view class="total-title">
						活动优惠
					</view>
					<view class="total-value">
						<picker mode="selector" :value="selectedActivity" :range="activityData" @change="selectActivity">
							<text>{{activityData[selectedActivity]}}</text>
							<uni-icon type="arrowright" color="#8c8c8c" size="20"></uni-icon>
						</picker>
					</view>
				</view>
				<view class="total-item" style="border-top: 1upx solid #EFEFEF;">
					<view style="flex: 1;color: #8B8B8B;font-size: 28upx;">共{{totalCount}}件</view>
					<view style="color: #4B4B4B;font-size: 28upx;"> 订单总价：
					<text style="color: #FF7465;font-size: 36upx;">￥{{totalPrice*1-baseDiscount*1-activityDiscount*1}}元</text></view>
				</view>
			</view>
		</view>
		
		<view class="note">
			<view class="note-title">
				留言备注
			</view>
			<view class="note-input">
				<input type="text" value="" placeholder="输入您的订单补充说明" v-model="note"/>
			</view>
		</view>
		
		<view class="liscens">
			<image :src="agree?'/static/checked.png':'/static/uncheck.png'" mode="" style="width: 40upx;height: 40upx;margin-right: 10upx;" @click="agree=!agree"></image>
			<text>我已阅读并同意</text><text style="color: #45AA8C;" @click="showLiscensPage">产品使用协议</text>
		</view>
		<view style="height: 100upx;">
			
		</view>
		<view class="bottom">
			<view class="price">
				已优惠:￥{{baseDiscount*1+activityDiscount*1}}
				<view style="margin-left: 60upx;">合计:</view>
				<text class="total-price">￥{{totalPrice*1-baseDiscount*1-activityDiscount*1}}</text> 
			</view>
			<view class="submit-btn" @click="confirm">
				提交订单
			</view>
		</view>
		<!-- 弹出层 -->
		<view class="grace-banner" style="background:#FFFFFF;" v-if="confirmShow">
			<view style="padding:0 20upx;">
				<view style="text-align: center;font-size: 30upx;color: #4B4B4B;padding:40upx 0">核对自取门店</view>
				<view style="display: flex;flex-direction: row;align-items: center;padding:20upx 0">
					<image src="../../../static/shop.png" style="width:38upx;height:44upx;margin-right: 10upx;" mode=""></image>
					<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #4B4B4B;">{{nearby.name}}</view>
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;">
					<image src="../../../static/location-green.png" mode="" style="width: 40upx;height: 44upx;margin-right: 10upx;"></image>
					<view style="font-size: 24upx;color: #4b4b4b;">
						{{nearby.address}}
					</view>
					
				</view>
			</view>
			<view style="margin-top: 20upx;padding:20upx 0;display: flex;flex-direction: row;justify-content: center;border-top: 1upx solid #f6f6f6;">
				<view style="border:1upx solid #2f2f2f;border-radius: 10upx;width: 180upx;line-height: 80upx;font-size: 25upx;color: #2f2f2f;margin-right: 40upx;text-align: center;" @click="showChoosePage">重新选择</view>
				<view style="border:1upx solid #45AA8C;background: #45AA8C;border-radius: 10upx;width: 180upx;line-height: 80upx;font-size: 25upx;color: #ffffff;text-align: center;" @click="submit">确定</view>
			</view>
		</view>
		<view class="grace-mask" v-if="confirmShow"></view>
	</view>
</template>

<script>
	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
	import uniIcon from '../../../components/uni-icon.vue'
	export default {
		components: {
			uniIcon,
			mpvuePicker,
		},
		onLoad:function(e){
			this.carts=uni.getStorageSync("cart");
			this.store_id=e.store_id;
			//uni.removeStorageSync("cart");
			this.getTotal();
			this.getLocation();
		},
		onShow:function(){
			var shop=uni.getStorageSync("selectedShop");
			uni.removeStorageSync("selectedShop");
			if(shop){
				this.nearby=shop;
			}
		},
		data() {
			var months=[];
			for(var i=1;i<=12;i++){
				months.push({
					label:i+"月",
				})
			}
			var days=[];
			for(var i=1;i<=31;i++){
				days.push({
					label:i+"日",
				})
			}
			var hours=[];
			for(var i=8;i<=22;i++){
				hours.push({
					label:i+"时",
				})
			}
			var date=new Date();
			var month=date.getMonth();
			var day=date.getDate()-1;
			var hour=date.getHours();
			if(hour+1>22){
				day++;
				hour=0;
			}else if(hour<8){
				hour=0;
			}else{
				hour-=7;
			}
			return {
				pickerValueDefault: [month, day,hour],
				pickerValueArray:[months,days,hours],
				carts:[],
				activities:[{
					"name":"无优惠",
					"discount":0,
				}],
				activityData:["无优惠 -￥0"],
				selectedActivity:0,
				store_id:0,
				order_time:"",
				totalCount:0,
				totalPrice:0,
				baseDiscount:0,
				activityDiscount:0,
				agree:true,
				note:"",
				nearby:{
					id:0,
					name:"获取中",
					address:"获取中",
					phone:"",
					longitude:"",
					latitude:"",
				},
				confirmShow:false,
			};
		},
		
		methods:{
			selectActivity:function(e){
				this.selectedActivity=e.detail.value;
				this.activeiyDiscount=this.activities[this.selectedActivity].discount;
			},
			confirm:function(){
				if(!this.agree){
					uni.showToast({
						title:"请先同意产品使用协议",
						image:"../../../static/error.png"
					});
					return;
				}
				if(!this.nearby.id){
					uni.showToast({
						title:"未选择门店",
						image:"../../../static/error.png"
					});
					return;
				}
				if(this.order_time==""){
					uni.showToast({
						title:"请选择到店时间",
						image:"../../../static/error.png"
					});
					return;
				}
				this.confirmShow=true;
			},
			submit:function(){
				this.confirmShow=false;
				var that=this;
				that.ajax("/order/product",{
					token:uni.getStorageSync("token"),
					products:JSON.stringify(this.carts),
					store_id:this.nearby.id,
					order_time:this.order_time,
					note:this.note,
					total_discount:this.baseDiscount*1+this.activityDiscount*1,
					discount:JSON.stringify([
						{
							"name":"基本优惠",
							"amount":this.baseDiscount,
						},
						{
							"name":this.activities[this.selectedActivity].name,
							"amount":this.activities[this.selectedActivity].discount
						},
					]),
					total_count:this.totalCount,
					total_price:this.totalPrice*1-this.baseDiscount*1-this.activityDiscount*1,
				},function(res){
					uni.showToast({
						title:"下单成功",
						icon:"success"
					});
					setTimeout(function(){
						uni.navigateBack({
							delta:5
						})
						// uni.navigateTo({
						// 	url:"/pages/order/detail/detail?id="+res.data.data+"&type=product",
						// })
					},1000);
				});
			},
			showChoosePage:function(){
				this.confirmShow=false;
				uni.navigateTo({
					url:"/pages/shop/choose/choose"
				})
			},
			viewLocation:function(){
				uni.openLocation({
					latitude:parseFloat(this.nearby.latitude),
					longitude:parseFloat(this.nearby.longitude),
				})
			},
			phoneCall:function(){
				uni.makePhoneCall({
					phoneNumber:this.nearby.phone?this.nearby.phone:"1555555555",
				})
			},
			getLocation:function(){
				uni.showLoading({
					title:"正在获取推荐门店"
				});
				var that=this;
				uni.getLocation({
					type:"gcj02",
					complete:function(e){
						uni.hideLoading();
						that.getRecommendShop(e);
					},
					fail:function(){
						uni.hideLoading();
						uni.showModal({
							title:"位置信息获取失败",
							content:"请手动选择位置",
							confirmText:"手动选择",
							success:function(e){
								if(e.confirm){
									uni.chooseLocation({
										success:function(e){
											that.getRecommendShop(e);
										}
									})
								}
							}
						})
					}
				})
			},
			getRecommendShop:function(location){
				var that=this;
				that.ajax("/shop/nearby/",{
					"latitude":location.latitude,
					"longitude":location.longitude,
					"count":1,
					"store_id":this.store_id
				},function(res){
					if(res.data.data.length>0){
						that.nearby=res.data.data[0];
					}else{
						that.nearby={
							name:"附近没有门店",
							address:"请点击右侧电话按钮联系客服"
						}
					}
				});
			},
			showLiscensPage:function(){
				uni.navigateTo({
					url:"/pages/license/license"
				})
			},
			onConfirm:function(e){
				this.order_time=this.pickerValueArray[0][e.index[0]].label+this.pickerValueArray[1][e.index[1]].label+this.pickerValueArray[2][e.index[2]].label
			},
			// 二级联动选择
			showMultiSelector:function() {
				this.$refs.mpvuePicker.show()
			}, 
			getDiscount:function(){
				var that=this;
				that.ajax("/order/product_discount/",{
					token:uni.getStorageSync("token"),
					total:this.totalPrice,
				},function(res){
					if(res.data.data.length>0){
						that.activities=res.data.data;
						that.activityDiscount=res.data.data[0].discount;
						that.activityData=[];
						for(var i = 0; i < that.activities.length;i++){
							that.activityData.push(that.activities[i].name+" -￥"+that.activities[i].discount);
						}
					}
				});
			},
			getTotal:function(){
				var price=0;
				var count=0;
				for(var i in this.carts){
					price+=this.carts[i].price*this.carts[i].count;
					count+=this.carts[i].count?this.carts[i].count:0;
					//计算基本优惠
					if(this.carts[i].count>=20){
						this.baseDiscount+=(this.carts[i].price*1-this.carts[i].price20*1)*this.carts[i].count;
					}else if(this.carts[i].count>=5){
						this.baseDiscount+=(this.carts[i].price*1-this.carts[i].price5*1)*this.carts[i].count;
					}
				}
				this.totalPrice=price;
				this.totalCount=count;
				this.getDiscount();
			},
		},
		
	}
</script>

<style>
	.bottom{
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100upx;
		font-size: 24upx;
		background: #ffffff;
		z-index: 100;
		justify-content: space-between;
		box-shadow:0upx 2upx 20upx 0upx rgba(71,142,126,0.15);
	}
	.price{
		display: flex;
		flex-direction: row;
		margin-left: 28upx;
		align-items: center;
	}
	.bottom-total{
		margin-left: 60upx;
	}
	.total-price{
		color: #FF7465;
		font-size: 36upx;
		
	}
	.submit-btn{
		background: #45AA8C;
		padding: 10upx 54upx;
		text-align: center;
		font-size: 32upx;
		border-radius: 45upx;
		margin-right: 28upx;
		color: #ffffff;
	}
	.liscens{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 30upx;
		justify-content:center;
		font-size: 28upx;
	}
	.note{
		padding: 20upx;
		display: flex;
		flex-direction: row;
		background: #ffffff;
		margin-top: 30upx;
	}
	.note-title{
		font-size: 28upx;
		color: #4B4B4B;
		margin-right: 20upx;
	}
	.note-input{
		flex: 1;
		font-size: 28upx;
		color: #4B4B4B;
	}
	.total{
		margin-top: 30upx;
		background: #ffffff;
		padding: 0 20upx;
	}
	.discount{
		color: #4B4B4B;
	}
	.total-item{
		display: flex;
		flex-direction: row;
		align-content: space-between;
		align-items: center;
		padding: 20upx 0;
	}
	.total-title{
		flex: 1;
		color: #4B4B4B;
		font-size: 28upx;
	}
	.total-value{
		flex: 1;
		text-align: right;
		color: #4B4B4B;
		font-size: 28upx;
	}
	.list{
		margin-top: 28upx;
		background: #ffffff;
		padding: 0 20upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	}
	.list-head{
		padding: 20upx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.list-title{
		flex: 1;
		font-size: 28upx;
		color: #4B4B4B;
	}
	.list-total{
		font-size: 24upx;
		color: #b6b6b6;
	}
	.list-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		height: 240upx;
	}
	.item-image{
		width: 202upx;
		height: 150upx;
		border-radius: 12upx;
	}
	.item-info{
		position: absolute;
		left: 118upx;
		right: 28upx;
		padding: 40upx;
		padding-left: 138upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:12upx;
		
	}
	.item-title{
		font-size: 28upx;
		display: flex;
		flex-direction: row;
		color: #4B4B4B;
	}
	.item-cart{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-content: flex-end;
		align-items: flex-end;
	}
	.weight{
		font-size: 20upx;
		line-height: 42upx;
		background: #45AA8C;
		border-radius: 8upx;
		display: inline-block;
		padding: 0 10upx;
		color: #ffffff;
		margin-left: 10upx;
	}
	.item-bottom{
		margin-top: 50upx;
		display: flex;
		color: #4B4B4B;
		flex-direction: row;
		align-items: center;
	}
	.item-price{
		flex: 1;
		font-size: 24upx;
		color: #ff340e;
		font-weight: 600;
	}
	.item-count{
		flex: 1;
		text-align: right;
		font-size: 22upx;
		color: #bcbcbc;
	}
	.order{
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #4B4B4B;
		font-size: 28upx;
		padding: 32upx 28upx;
		background: #ffffff;
		margin-top: 24upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	}
	.order-title{
		font-size: 30upx;
		flex: 1;
	}
	.order-time{
		flex: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28upx;
		color: #ABABAB;
		text-align: right;
	}
	.shop{
		margin-top: 32upx;
		padding: 32upx 28upx;
		background: #ffffff;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	}
	.shop-head{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.shop-title{
		font-size: 30upx;
		color: #4B4B4B;
		flex: 1;
	}
	.shop-name{
		flex: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28upx;
		color: #ABABAB;
		text-align: right;
	}
	.shop-location{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20upx;
	}
	.location-text{
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28upx;
		color: #478E7E;
	}
	 /* 遮罩层 */
	    .grace-mask {
	        background: rgba(0, 0, 0, 0.6);
	        position: fixed;
	        width: 100%;
	        height: 100%;
	        left: 0;
	        top: 0;
	        z-index: 1;
	    }
	
	    /* 弹出层形式的广告 */
	    .grace-banner {
	        width: 70%;
	        position: fixed;
	        left: 50%;
	        top: 50%;
	        background: #FFF;
	        border-radius: 10upx;
	        z-index: 99;
	        transform: translate(-50%, -50%);
	    }
</style>
